<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link data-th-replace="commons::res">
<style type="text/css">
body {
	padding: 15px
}
</style>
</head>
<body>
	<form class="layui-form" lay-filter='where'>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">角色名称:</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="name"
						placeholder="角色名称" />
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">角色编码:</label>
				<div class="layui-input-inline">
					<input class="layui-input" type="text" name="code"
						placeholder="角色编码" />
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline">
					<button type="button" lay-submit lay-filter="*" class="layui-btn">查询</button>
				</div>
			</div>
		</div>
	</form>
	<table class="layui-table" id="data-table" lay-filter='data'>
	</table>

	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
    	<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  	</div>
	</script>
	<script type="text/javascript">
		function reload(){
			layui.use(['table','form'],function(){
				let table=layui.table
				,form=layui.form;
				table.reload('data-table', {
					where: form.val('where')
				});
			})
		}
		layui
				.use(
						[ 'form', 'table', 'jquery', 'layer' ],
						function() {
							let form = layui.form, table = layui.table, $ = layui.jquery, layer = layui.layer;
							table.render({
								id:'data-table',
								elem : '#data-table',
								height :  'full-120',
								url : '[[@{/role/find}]]' //数据接口
								,
								page : true //开启分页
								,
								toolbar : '#toolbarDemo',
								cols : [ [ //表头
								{
									field : 'id',
									title : 'ID',
									width : 80,
									align : "center",
									fixed : 'left'
								}, {
									field : 'name',
									title : '角色名称',
									align : "center"
								}, {
									field : 'code',
									title : '角色编码',
									align : "center"
								}, {
									field : 'describe',
									title : '详情',
									align : "center"
								}, {
									fixed : 'right',
									width : 178,
									align : 'center',
									toolbar : '#barDemo'
								} ] ]
							});
							//监听头工具栏
							table.on("toolbar(data)", function(e) {
								if (e.event === 'add') {//点击添加按钮
									layer.open({
										type : 2,
										title : '添加角色',
										shadeClose : true,
										shade : 0.8,
										area : [ '400px', '370px' ],
										content : '[[@{/role/save}]]'
									});
								}
							});
							table.on("tool(data)", function(e) {
								let data = e.data;
								let event = e.event;
								switch (event) {
								case 'edit':
									layer.open({
										type : 2,
										title : '修改角色',
										shadeClose : true,
										shade : 0.8,
										area : [ '400px', '370px' ],
										content : '[[@{/role/save}]]/' + data.id
									});
									break;
								case 'del':
									layer.confirm(`是否删除角色[${data.name}]?`,{
										btn:['确认删除']
									},function(){
										$.get("[[@{/role/del}]]",{
											ids:data.id
										},function(rs){
											if(rs.success){
												layer.msg('删除成功',{icon:6});
												e.del();
											}else{
												layer.msg('删除失败',{icon:5});
											}
										},'json')
									})
									break;
								}
							})
							form.on("submit(*)",function(data){
								reload();
								return false;
							});
						});
	</script>
</body>
</html>